<!--数据统计-->
<template>
  <el-drawer
    :title="detailInfo.taskName"
    size="900px"
    :visible="visible"
    @close="updateVisible(false)">
    <div class="padding30">
      <div class="flex-align-center flex">
        <div :class="typeIndex==j ? 'type-cls' : 'no-type-cls'" v-for="(i,j) in typeList" :key="j" @click="typeClick(j)">{{i.title}}</div>
      </div>
      <div class="flex m-cls">
        <div class="flex-align-center width100">
          <div class="flex-column numberCount">
            <span>曝光量</span>
            <div>{{viewCount}}</div>
          </div>
          <div class="flex-column numberCount num-border">
            <span>点赞数</span>
            <div>{{likeCount}}</div>
          </div>
          <div class="flex-column numberCount">
            <span>评论数</span>
            <div>{{commentCount}}</div>
          </div>
        </div>
      </div>
      <div class="p-algin10">
        <!--toolkit：大小，行数，是否全屏展示，不加，则会展示全部（包含刷新）
            toolDefault: 表头背景
            :toolkit="[]"
            -->
        <!--toolbar :是否显示表头工具栏-->
        <ele-pro-table
          :toolbar="false"
          size="mini"
          :columns="columns2"
          :datasource="accounts"
          :selection.sync="selectionAccount"
          :need-page="true"
          :hideOnSinglePage="false"
        >
          <!-- 头像列 -->
          <template v-slot:head="{ row }">
            <div style="line-height: 1">
              <el-avatar v-if="row.head" :src="row.head" :size="35" />
            </div>
          </template>
          <!--操作-->
          <template v-slot:action="{ row }">
            <el-link
              type="primary"
              :disabled="form.types==1 ? true : false"
              :underline="false"
              @click.stop="viewWorks(row)"
            >
              观看作品
            </el-link>
          </template>
        </ele-pro-table>
      </div>
    </div>
  </el-drawer>
</template>

<script>
  import {queryDyksCount} from "@/api/digitalHumanManagement/taskList";
  export default {
    name: "data-detail",
    props:{
      visible:Boolean
    },
    data(){
      return{
        form:{
          page:1,
          limit:6,
          types:1
        },
        detailInfo:{},
        typeIndex:0,
        typeList:[
          /*{
            title:'D音cookie',
            id:1
          },
          {
            title:'D音H5',
            id:2
          },*/
          {
            title:'D音',
            id:1
          },
          {
            title:'K手',
            id:2
          },
        ],
        // 分组用户信息
        accounts:[],
        viewCount:0,//曝光量
        likeCount:0,//点赞数
        commentCount:0,//评论数

        selectionAccount:[],
        // 分组用户list
        columns2: [
          {
            prop: 'head',
            label: '头像',
            align: 'center',
            showOverflowTooltip: true,
            slot: 'head'
          },
          {
            prop: 'nickname',
            label: '用户昵称',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'viewCount',
            label: '曝光量',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'likeCount',
            label: '点赞数',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'commentCount',
            label: '评论数',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'createTime',
            label: '发布时间',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '操作',
            columnKey: 'action',
            align: 'center',
            resizable: false,
            slot: 'action',
            hideInSetting: true,
            showOverflowTooltip: true,
          }
        ],
      }
    },
    methods:{
      // 查询矩阵账号【分页查询】
      query(row){
        this.typeIndex=0
        this.form.types=this.typeList[0].id
        this.form.taskId=row.id
        this.detailInfo=row
        this.statistics()
      },
      typeClick(e){
        this.typeIndex=e
        this.form.types=this.typeList[e].id
        this.clear()
        this.statistics()
      },
      clear(){
        this.viewCount=0//曝光量
        this.likeCount=0//点赞数
        this.commentCount=0//评论数
      },
      statistics(){
        queryDyksCount(this.form)
          .then((data) => {
            this.accounts=data.list
            console.log("this.accounts",this.accounts)
            for(let i=0;i<this.accounts.length;i++){
              this.accounts[i].viewCount = this.accounts[i].viewCount ?this.accounts[i].viewCount: 0
              this.accounts[i].likeCount = this.accounts[i].likeCount ?this.accounts[i].likeCount: 0
              this.accounts[i].commentCount = this.accounts[i].commentCount ?this.accounts[i].commentCount: 0
              this.viewCount += this.accounts[i].viewCount //曝光量
              this.likeCount += this.accounts[i].likeCount //点赞数
              this.commentCount += this.accounts[i].commentCount //评论数
            }
          })
          .catch((e) => {
            this.$message.error(e);
          });
      },
      // 观看作品
      viewWorks(row){
        console.log("点击了观看作品",row)
        let videoUrl = row.playUrl
        window.open(videoUrl)
      },
      /* 更新 visible */
      updateVisible(value) {
        this.$emit('update:visible', value);
      },
    }
  }
</script>

<style scoped lang="less">
  .padding30{
    padding: 30px;
  }
  .type-cls ,.no-type-cls{
    margin: 0 20px;
    padding: 5px 10px;
    font-size: 16px;
  }
  .no-type-cls{
    color: #666666;
    background-color: #F4F4F4;
  }
  .type-cls{
    color: #1E6CEB;
    background-color: #C6E3FF;
  }
  .m-cls{
    margin: 30px 0 20px;
    .numberCount{
      width: calc(100% / 3);
      span{
        color: #757575;
      }
      div{
        margin-top: 11px ;
        color: #1E6CEB;
        font-size: 32px;
      }
    }
    .num-border{
      border-left: 1px solid #F0F0F0;
      border-right: 1px solid #F0F0F0;
    }
  }
</style>
